<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>显示总结</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        table td{
            border: 1px solid burlywood;
            height: 30px;
            width: 100px;
        }
        hr{
            margin-top: 20px;
            clear: both;
        }
        div.mytable1{
            margin:20px auto;
            height: 63px;
            width: 607px;
            border-top: 1px solid burlywood;
            border-left:1px solid burlywood
        }
        div.mytable1 > div{
            height: 30px;
            width: 100px;
            float: left;
            line-height: 30px;
            border-bottom:  1px solid burlywood;
            border-right:  1px solid burlywood;
        }
        div.mytable2{
            margin:20px auto;
            height: 63px;
            width: 607px;
            border-top: 1px solid burlywood;
            border-left:1px solid burlywood
        }
        div.mytable2 > div{
            display: inline-block;
            border-bottom:  1px solid burlywood;
            border-right:  1px solid burlywood;
            height: 30px;
            width: 100px;
            line-height: 30px;
        }

        .bord{
            border: 1px dashed #ee2602;
            width: 90%;
            margin: 20px auto;
        }
        .title{
            font-size: 20px;
            font-weight: bold;
            margin: 20px;
        }
        .introduce{
            font-size: 16px;
            margin: 0 0 20px 50px;
        }
        .red{
            color: red;
        }
    </style>
</head>
<body>
<div class="bord">
    <div class="title">显示总结</div>
    <div class="introduce">
        <table style="margin:20px auto;border-collapse: collapse">
            <tr>
                <td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td>
            </tr>
            <tr>
                <td>4</td><td>5</td><td>6</td><td>4</td><td>5</td><td>6</td>
            </tr>
        </table>
        <br/>
        <br/>
        <div class="mytable1">
            <div>1</div><div>2</div><div>3</div>
            <div>1</div><div>2</div><div>3</div>
            <div>4</div><div>5</div><div>6</div>
            <div>4</div><div>5</div><div>6</div>
        </div>
        <br/>
        <br/>
        <div class="mytable2">
            <div>1</div><div>2</div><div>3</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>4</div><div>5</div><div>6</div>
        </div>
        <pre style="font-size: 16px">
总结：
        float：注意清除模式【所有浏览器都支持】

        display inline-block：块级元素变行级元素，但是可以设置高宽度，【早期IE老版本不支持。】

        表格融合模式：border-collapse: collapse
</pre>
    </div>
</div>
</body>
</html>